<template>
  <div class="container">
    <div class="head-wrap">
      <select class="select-block clear-select" v-model="city" @change="chooseCity(city)">
        <option value="常州市" selected>常州市</option>
      </select>
      <i class="iconfont icon-triangle"></i>
    </div>
    <div class="content">
      <div v-for="(item,index) in keeperList" :key="index">
        <router-link :to="{name:'keeperDetail',params:{id:`${item.id}`}}" class="keeper-list">
          <div class="icon-wrap">
            <i class="iconfont icon-rank" :style="{'color':groupColor[index]}"></i>
            <p class="rank-txt">{{index + 1}}</p>
          </div>
          <div class="avator-bg">
            <div class="user-avator" :style="{backgroundImage: `url(${item.avatar})`}"></div>
          </div>
          <p class="user-num">{{item.id}}号</p>
          <p class="user-name overflow-txt">{{item.nickname}}</p>
          <div class="vote-num"><span class="active-txt">{{item.vote_count}}</span>票</div>
        </router-link>
      </div>
      <img class="to-top" src="http://piccdn.50yoga.cn/pics/public/sweet/images/shopkeeper/totop.png" @click="toTop">
    </div>
    <v-tabbar></v-tabbar>
  </div>
</template>

<script>
import { get } from '../../common/request'
import tabbar from '@/components/shopkeeper/tabbar.vue'

export default {
  name: 'keeperRank',
  data () {
    return {
      city: '常州市',
      keeperList: [],
      groupColor: ['#ffaf04', '#bccfff', '#94ddce']
    }
  },
  components: {
    'v-tabbar': tabbar
  },
  methods: {
    toTop () {
      window.scrollTo(0, 0)
    },
    chooseCity (city) {
      get(`/api/shield/vote/index`, {
        openid: localStorage.openid,
        city: city
      })
      .then((response) => {
        this.keeperList = response.data
      })
    }
  },
  created () {
    get(`/api/shield/vote/index`, {
      openid: localStorage.openid
    })
    .then((response) => {
      this.keeperList = response.data
    })
  }
}
</script>

<style scoped lang="stylus">
$keeperColor = #f06774;

.container{
  width 100%
  display flex
  flex-direction column
  background #fff
  .head-wrap{
    width 100%
    height 2.8125rem
    background #fff
    border-bottom 1px solid #8a8a8a
    display flex
    align-items center
    position fixed
    top 0
    z-index 999
    .select-block{
      margin-left 1rem
      outline none
      font-size 0.875rem
    }
    .icon-triangle{
      font-size 0.875rem
      margin-left 0.625rem
    }
  }
  .content{
    width 100%
    display flex
    flex-direction column
    position relative
    margin-top 4.0625rem
    padding-bottom 5rem
    .keeper-list{
      width 100%
      height 5rem
      min-height 5rem
      position relative
      display flex
      align-items center
      font-size 1rem
      padding 0.3125rem 0
      .icon-wrap{
        position relative
        display flex
        justify-content center
        align-items center
        margin 0 0.8125rem
        .icon-rank{
          font-size 2rem
          color #cecece
        }
        .rank-txt{
          position absolute
          color #fff
          z-index 99
        }
      }
      .avator-bg{
        width 5rem
        height 5rem
        background #fff
        border-radius 50%
        border 1px solid $keeperColor
        box-sizing border-box
        display flex
        justify-content center
        align-items center
        .user-avator{
          width 4.625rem
          height 4.625rem
          border-radius 50%
          background-color #ccc
          background-size cover
        }
      }
      .user-num{
        margin 0 0.625rem 0 0.9375rem
      }
      .user-name{
        max-width 7.25rem;
      }
      .vote-num{
        position absolute
        right 0.9375rem
        .active-txt{
          color $keeperColor
        }
      }
    }
    .to-top{
      width 2.8125rem
      height 2.8125rem
      position fixed
      right 0.9375rem
      bottom 3.9375rem
      z-index 999
    }
  }
}
</style>
